<template>
    <el-tabs type="border-card">
        <el-tab-pane :label="articleId?'编辑文章':'发布文章'">
            <el-form
                label-position="top"
                label-width="80px"
                :model="formLabelAlign"
                ref="ruleForm"
                :rules="rules"
            >
                <el-form-item label="文章标题" prop="title">
                    <el-input
                        class="title"
                        v-model="formLabelAlign.title"
                        maxlength="30"
                        show-word-limit
                    > </el-input>
                </el-form-item>

                <el-form-item label="文章简介" prop="digest">
                    <el-input
                        type="textarea"
                        v-model="formLabelAlign.digest"
                        :autosize="{ minRows: 2}"
                        show-word-limit
                        :rows="3"
                    ></el-input>
                </el-form-item>

                <el-form-item label="文章标签" prop="tagId">
                    <el-radio-group
                        v-model="formLabelAlign.tagId"
                        size="small"
                    >
                        <el-radio
                            v-for="item in tagListData"
                            :label="item.id"
                            :key="item.id"
                            border
                        >{{ item.name }}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="文章内容" prop="content">
                    <com-mavon-editor ref="comEditor" />
                </el-form-item>

                <el-form-item prop="image_text" :error="codeErr">
                    <el-input
                        v-model="formLabelAlign.image_text"
                        placeholder="验证码"
                        minlength="4"
                        maxlength="4"
                        style="width: 350px;"
                        @keyup.enter.native="submit"
                    >
                        <img
                            slot="append"
                            :src="'data:image/jpg;base64,'+code_image"
                            alt="图片验证码"
                            class="code_image"
                            @click="getImgCode"
                        />
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submit">立即发布</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import { fileUpload,articleAdd,articleAdminDetail,articleEdit, } from '@/api/article'
    import {imageCode} from '@/api/user'
    import {EditRules} from "@forms/article";
    import { mapGetters } from 'vuex'

    import comMavonEditor from '@/components/comMavonEditor/comMavonEditor'
    export default {
        name: "articleAdd",
        components: {
            comMavonEditor,
        },
        data() {
            return {
                articleId: '',
                formLabelAlign: {
                    title: '',
                    digest: '',
                    content: '',
                    tagId: '',
                    image_text: '',
                },
                image_uuid: '',
                code_image: '',
                codeErr:'',
                rules:EditRules,
            }
        },
        mounted() {
            // 修改页面获取文章详情
            this.init()
        },
        watch: {
            $route(){
                this.init()
            }
        },
        computed:{
            ...mapGetters({
              tagListData:'article/getTagList'
            }),
        },
        methods: {
            init(){
                this.articleId = this.$route.params.articleId
                this.articleId?this.getDetail(): this.clearData()

                this.getImgCode()
            },
            getDetail() {
                articleAdminDetail(this.articleId)
                    .then(res => {
                        if (Number(res.code) === 0) {
                            let detail =res.data
                            let data = {
                                title: detail.title,
                                digest: detail.digest,
                                content: detail.content,
                                tagId: detail.tag_id,
                            }
                            this.$refs.comEditor.setCon(detail.content)
                            Object.assign(this.formLabelAlign,data)
                        } else {
                            this.$Alert({message: res.msg, type: 'error'})
                        }
                    })
            },
            // 获取图片验证码
            getImgCode() {
                imageCode()
                    .then(res => {
                        if (Number(res.code) === 0) {
                            this.image_uuid = res.data.image_uuid
                            this.code_image = res.data.image
                        } else {
                            this.$Alert({message: res.msg, type: 'error'})
                        }
                    })
            },
            // 图片上传
            uploadImg(data){
                let file = data.file
                fileUpload(file)
                    .then(res=>{
                        if(Number(res.code)===0){
                        }else{
                            this.$Alert({ message:res.msg,type:'error' })
                        }
                    })
            },
            // 提交文章
            submit(){
                this.formLabelAlign.content = this.$refs.comEditor.getCon()
                this.$refs.ruleForm.validate(valid => {
                    if (!valid) return false
                    let formLabelAlign = this.formLabelAlign

                    let params = {
                        title:formLabelAlign.title,
                        digest:formLabelAlign.digest,
                        content:formLabelAlign.content,
                        tag:formLabelAlign.tagId,
                        image_text:formLabelAlign.image_text,
                        image_uuid:this.image_uuid,
                    }

                    this.codeErr = ''


                    if(this.articleId){
                        // 修改文章
                        articleEdit(this.articleId,params)
                            .then(res=>this.resultHandle(res))
                    }else{
                        // 新增文章
                        articleAdd(params)
                            .then(res=>this.resultHandle(res))
                    }
                })
            },
            resultHandle(res){
                if(Number(res.code)===0){
                    this.$Alert({
                        message:res.msg,
                        type:'success',
                        callback:()=> {
                            this.$router.push(`/admin/articleList`)
                        }
                    })
                }else{
                    this.getImgCode()
                    if(/验证码/.test(res.msg)){
                        this.codeErr = res.msg
                    }else{
                        this.$Alert({ message:res.msg, type:'error' })
                    }
                }
            },
            clearData(){
                this.articleId = ''
                this.formLabelAlign = {
                    title: '',
                    content: '',
                    tagId: '',
                    image_text: '',
                }
                this.code_image = ''
                this.image_uuid = ''
                this.$nextTick(()=>{
                    this.$refs.comEditor.clearCon()
                })
            }
        },
    }
</script>

<style scoped lang="less">
    .code_image {
        height: 38px;
        cursor: pointer;
    }

    .title{
        width: 80%;
        min-width: 400px;
    }

    .el-radio{
        margin: 0 10px 10px 0;
    }
</style>
